﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>花旗</title>

<link type="text/css" rel="stylesheet" href="css/style2.css">

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/img_ver.js"></script>

<style>
        .bxs-row {
            margin-bottom:12px;
        }
        .logo-box {
            width:404px;
            margin:120px auto;
            border:1px solid #e5e5e5;
            border-radius:4px;
            box-shadow:0 4px 18px rgba(0,0,0,0.2);
            position:relative;
            overflow:hidden;
            height:360px;
        }
        .login {
            position:absolute;
            width:320px;left:0;
            top:0;
            padding: 42px 42px 36px;
            transition:all 0.8s;
        }
        .username,.password,.btn {
            height: 44px;
            width: 100%;
            padding: 0 10px;
            border: 1px solid #9da3a6;
            background: #fff;
            text-overflow: ellipsis;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            color: #000;
            font-size: 1em;
            font-family: Helvetica,Arial,sans-serif;
            font-weight: 400;
            direction: ltr;
            font-size:13px;
        }
        .submit {
            background-color: #0070ba;
            color:#fff;
            border:1px solid #0070ba;
        }
        .submit:hover {
            background-color:#005ea6;
        }
        .verBox {
            position:absolute;
            width:100%;
            text-align:center;
            left:404px;
            top:0;
            opacity:0;
            transition:all 0.8s;
            padding-top:55px;
        }
        .err {
            margin:12px 0 0;
            line-height:12px;
            height:12px;
            font-size:12px;
            color:red;
        }
</style>

</head>
<body>

<div class="logo-box" style="height:400px;">
<div class="login" style="">
<div class="bxs-row" style="text-align:center;">
<img id="logo" src="../img/null-password.jpg" style="width:72px;"><span id="a" class="tips" style="color:red;">BUG是你的问题，和我的代码无关</span>
</div>
    <form action="/enter.do" method="post">
<div class="bxs-row">
<input type="text" name="user" class="username" placeholder="用户名">
<p class=" err err-username"></p>
</div>
<div class="bxs-row">
<input type="password" name="password" class="password" placeholder="密码">
<p class="err err-password"></p>
</div>
<div class="bxs-row">
<input type="submit" class="submit btn" value="登录">
</div>
        <span class="tips"><a href="/signin.html" style="color: aquamarine">注册</a></span>
    </form>
</div>
</div>

<!--登录页面友情小提示-->
<script>
    $(function () {
      //  获得随机数
      var num=  Math.random();
       var z= Math.ceil(num*4);
       //根据随机数来随机使用友情小提示
       if(z==2||z==3){
           document.getElementById("a").innerText="登录没反应就是你账号或密码错了";
       }else if(z==4){
           document.getElementById("a").innerText="别催我改BUG，你行你上啊！";
       }
    });
</script>

</body>
</html>